<template>
  <div class="pa30 pb100">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="教研" name="first">
        <div class="pa30">
          <custom-table :data="researchList" :columns="researchColumns" />
          <pagination :total="researchTotal" @pagination="researchPagination" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="在线课程" name="second">
        <div class="pa30">
          <custom-table :data="liveList" :columns="liveColumns" />
          <pagination :total="liveTotal" @pagination="livePagination" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import CustomTable from '@/components/CustomTable/index';
import Pagination from '@/components/Pagination/index';

import { userEnrollWebCastPage, myJoinedTeachingResearch } from '@/api/users';

export default {
  name: 'UserActivity',
  components: {
    CustomTable,
    Pagination
  },
  data () {
    return {
      // 教研搜索
      researchList: [],
      researchTotal: 0,
      researchQuery: {
        condition: this.$route.query.userId,
        pager: {
          page: 1,
          pageSize: 10
        }
      },
      researchColumns: [
        { label: '序号', value: 'index', align: 'center', width: '100px' },
        { label: '标题', value: 'title', align: 'center' },
        { label: '发起者', value: 'creatorName', align: 'center', width: '140px' },
        { label: '创建时间', value: 'createTime', align: 'center', width: '200px' },
        { label: '状态', value: 'statusTxt', align: 'center', width: '120px' }

      ],

      // 在线课程搜索
      liveList: [],
      liveTotal: 0,
      liveQuery: {
        condition: {
          userId: this.$route.query.userId
        },
        pager: {
          page: 1,
          pageSize: 10
        }
      },
      liveColumns: [
        { label: '序号', value: 'index', align: 'center', width: '100px' },
        { label: '活动标题', value: 'title', align: 'center' },
        { label: '发起者', value: 'creatorName', align: 'center', width: '140px' },
        { label: '创建时间', value: 'createTime', align: 'center', width: '200px' },
        { label: '状态', value: 'statusTxt', align: 'center', width: '120px' }
      ],

      activeName: 'first'

    };
  },
  created () {
    console.log(this.$route.query.userId);
    this.init();
  },
  methods: {
    handleClick (tab, event) {
      console.log('当前tab索引:', tab.index, this.activeName);
      // console.log(tab, event)
    },

    async init () {
      await this.liveInit();
      await this.researchInit();
    },

    // 在线课程
    liveInit () {
      // userEnrollWebCastPage, myJoinedTeachingResearch
      userEnrollWebCastPage(this.liveQuery)
        .then(res => {
          console.log('在线课程:', res.data.records);
          if (this.checkArr(res.data.records)) {
            res.data.records.map(item => {
              switch (item.status) {
                case 'NOT_STARTED':
                  item.statusTxt = '未开始';
                  break;
                case 'ONGOING':
                  item.statusTxt = '进行中';
                  break;
                case 'END':
                  item.statusTxt = '已结束';
                  break;
                case 'VIOLATE':
                  item.statusTxt = '违规';
                  break;
                case 'UNAUDITED':
                  item.statusTxt = '待审核';
                  break;
              }
            });
          }

          this.liveList = res.data.records;
          this.liveTotal = res.data.total;
        })
        .catch(error => { });
    },
    livePagination ({ page, limit }) {
      this.liveQuery.pager.page = page;
      this.liveQuery.pager.pageSize = limit;
      this.liveInit();
    },

    // 教研
    researchInit () {
      // userEnrollWebCastPage, myJoinedTeachingResearch
      myJoinedTeachingResearch(this.researchQuery)
        .then(res => {
          console.log('教研:', res.data.records);
          if (this.checkArr(res.data.records)) {
            res.data.records.map(item => {
              switch (item.status) {
                case 'NOT_START':
                  item.statusTxt = '未开始';
                  break;
                case 'STARTED':
                  item.statusTxt = '已开始';
                  break;
                case 'ENDED':
                  item.statusTxt = '已结束';
                  break;
                case 'UNAUDITED':
                  item.statusTxt = '未审核';
                  break;
                case 'NORMAL':
                  item.statusTxt = '正常';
                  break;
                case 'VIOLATE':
                  item.statusTxt = '违规';
                  break;
              }
            });
          }
          this.researchList = res.data.records;
          this.researchTotal = res.data.total;
        })
        .catch(error => { });
    },
    researchPagination ({ page, limit }) {
      this.researchQuery.pager.page = page;
      this.researchQuery.pager.pageSize = limit;
      this.researchInit();
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.forms_w50 {
  width: 50%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50%;
  height: 50%;
  line-height: 158px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.form_list {
  height: 170px;
  padding: 20px;
  border: 1px solid black;
  overflow: auto;
  line-height: 30px;
}

.upload_img {
  height: 200px;
  overflow: hidden;
}

.test {
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.tag {
  border: 1px solid black;
  border-radius: 20px;
  padding: 5px 10px;

  &_status {
    background: rgb(79, 192, 141);
    color: white;
    height: 20px;
    padding: 0 10px;
    // padding: 5px 10px;
    // padding: 5px 10px;
  }

  &_lineheight {
    line-height: 20px;
  }
}

.el-scrollbar__wrap {
  margin-bottom: 0 !important;
}

.study_list {
  // border: 1px solid black;
  width: 350px;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;

  // margin: 10px 30px;
  &_underline {
    border: 0px;
    border-bottom: 1px solid black;
  }
}

.study_title {
  font-size: 24;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.study_text {
  color: #b5b5b5;

  &_blck {
    color: black;
  }
}

.study_tag {
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  font-size: 12px;
  background: rgb(215, 215, 215);
  color: black;

  // border: 1px solid black;
  &_color {
    background: rgb(215, 215, 215);
    border: 0px;
  }
}

.borders {
  border: 1px solid black;
}

.track {
  line-height: 25px;
}

.scroll_div {
  height: 750px;
  overflow: scroll;
}

.avtar_height {
  height: 50px;
  line-height: 25px;
  -webkit-text-size-adjust: none;
}

.avatar_size {
  height: 50px;
  width: 50px;
}

.scroll_div {
  height: 500px;
  overflow-y: scroll;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: #e8f3fe;
  margin: 10px;
  color: #7dbcfc;
}
</style>
